<template>
  <div class="login">
    <div class="login_main">
       <div class="login_banner">
           <img src="/static/img/aa.jpg" alt="">
           <div class="login_banner_text">
             树蕙元学习平台
             <p>这是一个很重要的平台,你想说点什么呢？</p>
           </div>
       </div>
       <el-form ref="loginForm" :model="loginForm" class="login_elform">
          <h3>欢迎登陆</h3>
          <el-form-item>
             <el-input
               v-model="loginForm.userName"
               id="userName"
               type="text"
               placeholder="用户名"
               auto-complete="off"
             ></el-input>
          </el-form-item>
         <el-form-item>
           <el-input
             v-model="loginForm.pwd"
             type="password"
             placeholder="密码"
             auto-complete="off"
           ></el-input>
         </el-form-item>
         <el-form-item>
            <el-button class="login_btu-all" type="primary" size="medium" @click="accountLogin">登录</el-button>
         </el-form-item>
         <el-form-item>
            <el-checkbox v-model="checked"></el-checkbox>
            我已阅读并同意<span>《用户服务协议》</span>和<span>《隐私政策》</span>
         </el-form-item>
       </el-form>
      </div>
    </div>
</template>

<script>
export default {
  name: '',
  data() { 
    return {
      loginForm:{
        userName:"",
        pwd:""
      },
      checked:false,
      pass:"123",
      uName:"gao"
    }
  },
  mounted() {
    
  },
  methods:{
    accountLogin(){
      if(this.loginForm.userName === this.uName && this.loginForm.pwd === this.pass){
        //把值存储在缓存中
        let nameUser =[this.uName,this.pass];
        localStorage.setItem("nameUser",JSON.stringify(nameUser));
        console.log(nameUser)
        this.$router.push("/home")
      }else{
        alert("账户或密码错误")
      }
    }
  },
 }
</script>

<style>
.login{
  width: 100%;
  min-width:992px;
  height: 900px;
  background:linear-gradient(#E2F2FF,#fff);
  overflow: hidden;
}
.login_main{
  width: 70%;
  height: 640px;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.login_banner{
  width: 61%;
  height: inherit; 
  position: relative;
  overflow: hidden;
}
.login_banner img{
  width: 100%;
  height: 100%;
  /* margin-left: -20%; */
}
.login_banner .login_banner_text{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 42%;
  font-size: 40px;
  color: #fff;
}
.login_banner .login_banner_text p{
  margin-top: 20px;
  font-size: 28px;
}
.login_elform{
    width: 39%;
    height: inherit;
    background: #fff;
    box-sizing: border-box;
    padding: 60px 80px;
}
.login_elform input{
  height: 40px !important;
  margin: 10px 0 !important;
}
.login_elform h3{
  text-align: center;
  padding-bottom: 40px;
  color: #4888AB;
  font-size: 26px;
}
.login_elform .el-button{
  width: 70%;
  position: relative;
  left: 15%;
  height: 45px;
  border-radius:30px;
  margin: 30px 0;
}
.el-form-item__content>span{
  color: #43BC60;
}
</style>